<!-- 项目档案 -->
<template>
	<!-- 企业详情 -->
	<view>
		<view class="content" id="content">
			<view class="list_box" @touchstart="touchShow = false" @click="touchShow =false" @touchmove="touchShow = false">
				<template v-if="projectShowType != '1'">
					<view class="oyher_top">
						立项信息
					</view>
					<view class="basic_box">
						<view class="label">
							<view class="label_title">档案编号</view>
							<view class="label_info">{{ model.finalNo?model.finalNo: '--' }}</view>
						</view>
						<view class="label">
							<view class="label_title">申请部门</view>
							<view class="label_info">{{ model.proposerDeptId_dictText }}</view>
						</view>
						<view class="flex_box">
							<view class="label">
								<view class="label_title">申请人</view>
								<view class="label_info">{{model.proposer_dictText}}</view>
							</view>
							<view class="label">
								<view class="label_title">申请时间</view>
								<view class="label_info">{{model.createTime}}</view>
							</view>
						</view>
					</view>
					<view class="other_box"></view>
					<view class="oyher_top">
						基本信息
					</view>
					<view class="basic_box">
						<view class="label" v-if="model.isPrepareEstablish == '1'">
							<view class="label_title">投标档案</view>
							<view class="label_info">{{ model.tenderFinalCode }}</view>
						</view>
						<view class="label">
							<view class="label_title">项目名称</view>
							<view class="label_info">{{ model.projectName }}</view>
						</view>
						<view class="flex_box">
							<view class="label">
								<view class="label_title">数据来源</view>
								<view class="label_info">{{model.isPrepareEstablish_dictText}}</view>
							</view>
							<view class="label">
								<view class="label_title">项目承接人</view>
								<view class="label_info">{{model.undertaker_dictText}}</view>
							</view>
						</view>
						<view class="label">
							<view class="label_title">经营团队</view>
							<view class="label_info">{{model.teamName_dictText}}</view>
						</view>
						<view class="flex_box">
							<view class="label">
								<view class="label_title">立项日期</view>
								<view class="label_info">{{model.projectEstablishDate}}</view>
							</view>
							<view class="label">
								<view class="label_title">是否投标、报价</view>
								<view class="label_info">{{model.isBidding_dictText}}</view>
							</view>
						</view>
						<view class="label">
							<view class="label_title">签订单位</view>
							<view class="label_info">{{model.signUnit_dictText}}</view>
						</view>
						<view class="flex_box">
							<view class="label">
								<view class="label_title">业绩归属年度</view>
								<view class="label_info">{{model.year_dictText}}</view>
							</view>
							<view class="label">
								<view class="label_title">是否环评项目</view>
								<view class="label_info">{{model.isEnvironmentalAssessmentProject_dictText}}</view>
							</view>
						</view>
						<view class="label">
							<view class="label_title">业主单位</view>
							<view class="label_info">{{model.ownerUnit_dictText}}</view>
						</view>
						
						<view class="flex_box">
							<view class="label">
								<view class="label_title">联系人</view>
								<view class="label_info">{{model.contacts_dictText}}</view>
							</view>
							<view class="label">
								<view class="label_title">联系方式</view>
								<view class="label_num">{{model.contactTel}}</view>
							</view>
						</view>
						<view class="label">
							<view class="label_title">项目所在地址</view>
							<view class="label_info">{{model.address}}</view>
						</view>
						<view class="flex_box">
							<view class="label">
								<view class="label_title">项目来源</view>
								<view class="label_info">{{model.projectSource_dictText}}</view>
							</view>
							<view class="label">
								<view class="label_title">项目变更状态</view>
								<view class="label_info">{{model.changeStatus_dictText}}</view>
							</view>
						</view>
						<view class="flex_box">
							<view class="label">
								<view class="label_title">预计合同额(元)</view>
								<view class="label_info">{{model.estimatedContractAmount}}</view>
							</view>
							<view class="label">
								<view class="label_title">预计合同额大写</view>
								<view class="label_info">{{model.estimatedContractcapitalChineseAmount}}</view>
							</view>
						</view>
						<view class="label">
							<view class="label_title">立项事由及说明</view>
							<view class="label_info">{{model.establishReason?model.establishReason: '--'}}</view>
						</view>
						<view class="label">
							<view class="label_title">相关附件</view>
							<view class="label_info"><file-list :fileList="model.attachment"></file-list></view>
						</view>
					</view>
					<view class="other_box"></view>
					<view class="oyher_top">任务信息</view>
					<projectFileListDetailItem :dataSource="dataSource" @clickTask="clickTask"></projectFileListDetailItem>
				</template>
				
				<template v-if="progressShowType != '2'">
					<view class="other_box"></view>
					<view class="oyher_top">任务进度</view>
					<projectFileListDetailTaskProgressItem :dataSource="progressDataSource"></projectFileListDetailTaskProgressItem>
				</template>
			</view>
		</view>
	</view>
</template>
<script>
	import http from '@/utils/request/index.js'
	import specialHttp from '@/utils/request/specialIndex' // 特殊请求方式，直接返回res
	import address from '@/utils/address.js'
	import fileList from '@/pages/synergy/components/fileList.vue'
	import projectFileListDetailItem from './components/projectFileListDetailItem.vue'
	import projectFileListDetailTaskProgressItem from './components/projectFileListDetailTaskProgressItem.vue'
	export default {
		components: {fileList, projectFileListDetailItem, projectFileListDetailTaskProgressItem},
		data() {
			return {
				id: '',
				projectId: '',
				model: {},
				address,
				dataSource: [], // 任务信息
				progressDataSource: [], // 任务进度
				progressShowType: '-2', // 控制进度是否显示
				projectShowType: '-1', // 控制进度是否显示
			}
		},
		onLoad(options) {
			this.id = options.id || ''
			if (options.id) {
				this.getDetail()
				this.getProjectTaskList()
				this.getProjectTaskProgressList()
			}
		},
		watch: {
			projectId: {
				handler (val) {
					if (val) {
						this.id = val
						this.getDetail()
						this.getProjectTaskList()
						this.getProjectTaskProgressList()
					}
				},
				immediate: true
			}
		},
		methods: {
			getDetail () {
				http.get('/api/erp/omc/project/erpOmcProject/queryById', { id: this.id }).then(async (res) => {
				  if (res.success) {
				    this.model = res.result
						this.model.address = this.getAddress(res.result.areaCode) + res.result.projectAddress
				  }
				})
			},
			// 获取任务信息
			async getProjectTaskList (){
				specialHttp.get('/api/erp/omc/project/erpOmcProjectTask/listById', { id: this.id }).then(async (res) => {
					if (res.length > 0) {
						this.dataSource = res || res.result;
					}
				})
			},
			// 进度信息
			async getProjectTaskProgressList () {
				const params = await {
						projectId: this.id,
						pageNo: 1,
						pageSize: 10000,
						column: '',
						order: ''
					}
				http.get('/api/erp/progress/erpProgressTask/progressList', params).then(async res => {
					if (res.success) {
						this.progressDataSource = res.result.records || []
					} else {
						this.$message.warning(res.message)
					}
				})
			},
			// 地址显示
			getAddress(areaCode) {
			  var arr = areaCode.split(',')
			  var addressDetail = ''
			  this.address.map((value) => {
			    if (arr[0] && value.code == arr[0]) {
			      addressDetail = value.name
			      value.children.map((val) => {
			        if (arr[1] && val.code == arr[1]) {
			          addressDetail = addressDetail + val.name
			          val.children.map((item) => {
			            if (arr[2] && item.code == arr[2]) {
			              addressDetail = addressDetail + item.name
			            }
			          })
			        }
			      })
			    }
			  })
			  return addressDetail
			},
			
			// 点击任务信息中的任务档案编号
			clickTask (item) {
				uni.navigateTo({
					url:`/pages/reportFilesList/ErpTaskFileDetail?id=${item.projectId}&projectTaskId=${item.projectTaskId}`
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.address_text {
		color: #1E6FFF !important;
	}
	.no_address {
		line-height: 36rpx;
		color: #171717;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.file_images{
		display: flex;
		flex-wrap: wrap;
		margin-top: 16rpx;
		.file_image{
			width: 190rpx;
			height:190rpx;
			background: rgba(0,0,0,0.02);
			border-radius: 10rpx;
			border: 1px solid rgba(0,0,0,0.08);
			margin-right: 24rpx;
			position: relative;
			padding: 2rpx;
			.file_image_img{
				width: 100%;
				height: 100%;
			}
			.file_image_open{
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
		}
	}
	.top_bottom{
		border-top: 1px solid #f2f2f2;
	}
	.top_bor{
		border-top: 1px solid #f2f2f2;
		border-bottom: none !important;
	}
	.no_bor {
		margin-top: 0 !important;

		// .oyher_top {
		// 	border-bottom: none;
		// }
	}

	.saoma {
		color: #FFFFFF;
		font-size: 16px;
		font-weight: 400;
		padding-right: 32rpx;
		line-height: 44rpx;
	}
	
	.content {
		width: 100%;
		// height: auto;
	}

	.detail_tip {
		padding: 40rpx 20rpx 20rpx;
		box-sizing: border-box;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7F7F7F;
	}

	.type_box {
		display: flex;
		flex-wrap: wrap;

		.type_info {
			width: 120rpx;
			height: 64rpx;
			background: #F7F7F7;
			border-radius: 4px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #7F7F7F;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
		}
	}

	.bot_botm {
		margin-bottom: 20rpx;

		.label {
			margin-bottom: 0 !important;
		}
	}

	.bor-bot-no {
		padding-bottom: 20rpx;
		box-sizing: border-box;
		margin-bottom: 0 !important;
		border-bottom: 1px solid #f2f2f2;
	}

	// 下面的线
	.bor-bot {
		padding-bottom: 32rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #f2f2f2;
	}

	.other_box {
		margin-top: 20rpx;
	}

	.oyher_top {
		padding: 16rpx 36rpx 16rpx 44rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #F2F2F2;
		background-color: #FFFFFF;
		position: relative;
		font-size: 16px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;

		&::before {
			content: ''; // 必须
			position: absolute;
			left: 32rpx;
			top: 50%;
			transform: translate(0, -50%);
			width: 6rpx;
			height: 29rpx;
			background-color: #1e6fff;
		}
	}

	.basic_box {
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}
	
	.label {
		margin-bottom: 20rpx;
		flex: 1;
	}
	
	.label_image{
		width: 320rpx;
		height: 180rpx;
		border-radius: 10rpx;
	}
	
	.label_title {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #B2B2B2;
		height: 20px;
		margin-right: 16rpx;
	}

	.label_info {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #171717;
	}

	.label_num {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1E6FFF;
	}

	.flex_box {
		display: flex;
		// align-items: center;
	}
	
</style>
